<template>
  <div class="l-head">
    <div class="container">
      <div class="head-logo">
        <h1>{{ headTitle }}</h1>
      </div>
      <nav class="head-nav">
        <ul>
          <li v-for="navItem in navList" :key="navItem.id">
            <NuxtLink :to="navItem.path" v-if="navItem.path !== '/more'">
              {{ navItem.name }}
            </NuxtLink>
            <a href="/" v-else>{{ navItem.name }}</a>
            <ul class="submenu" v-if="navItem.children">
              <li v-for="submenu in navItem.children" :key="submenu.id">
                <a :href="submenu.path" target="_blank">{{ submenu.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headTitle: '必慎的博客',
      navList: [
        {
          name: '首页',
          path: '/',
          id: 1,
        },
        {
          name: '文章归档',
          path: '/article',
          id: 2,
        },
        {
          name: '分类',
          path: '/cate',
          id: 3,
        },
        {
          name: '关于',
          path: '/about',
          id: 4,
        },
        {
          name: '更多',
          path: '/more',
          id: 5,
          children: [
            {
              name: 'Vue文档',
              path: 'https://cn.vuejs.org/index.html',
              id: 501,
            },
            {
              name: 'React文档',
              path: 'https://react.docschina.org/',
              id: 502,
            },
            {
              name: 'Nuxt文档',
              path: 'https://www.nuxtjs.cn/guide',
              id: 503,
            },
          ],
        },
      ],
    };
  },
};
</script>
